import { selectedKeysByPath } from '@/utils'
import { Menu } from 'antd'
import Layout, { Content } from 'antd/lib/layout/layout'
import Sider from 'antd/lib/layout/Sider'
import React from 'react'
import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom'

function index() {
  const history = useHistory()
  return (
    <Layout>
      <Sider>
        <Menu style={{
          height: 'calc(100vh - 64px)'
        }} theme="dark" selectedKeys={selectedKeysByPath(history, ["/tools/favorites",
          "/tools/income",
          "/tools/meeting",
          "/tools/todo"])}>
          <Menu.Item key="/tools/todo">
            <Link to="/tools/todo">任务</Link>
          </Menu.Item>
          <Menu.Item key="/tools/favorites">
            <Link to="/tools/favorites">收藏</Link>
          </Menu.Item>
          <Menu.Item key="/tools/income">
            <Link to="/tools/income">收入</Link>
          </Menu.Item>
          <Menu.Item key="/tools/meeting">
            <Link to="/tools/meeting">会议</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Content>
        <Switch>
          <Route path="/tools/favorites" component={require("./favorites").default}></Route>
          <Route path="/tools/income" component={require("./income").default}></Route>
          <Route path="/tools/meeting" component={require("./meeting").default}></Route>
          <Route path="/tools/todo" component={require("./todo").default}></Route>
          <Redirect to="/tools/todo" />
        </Switch>
      </Content>
    </Layout>
  )
}

export default index
